<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>员工列表</title>
<%
	pageContext.setAttribute("path", request.getContextPath());
%>
<script type="text/javascript"
	src="${path }/static/js/jquery-1.12.4.min.js"></script>
<link rel="stylesheet"
	href="${path}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script type="text/javascript"
	src="${path }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>


</head>
<body>
<!-- 员工添加模态框开始 -->
<div class="modal fade" id="empAddModa" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">添加员工</h4>
      </div>
      <div class="modal-body">
        <!-- 员工添加表单开始 -->
		 <form class="form-horizontal" id="emp_add_from">
			  <div class="form-group">
			    <label for="emp_namp_add_input" class="col-sm-2 control-label" >员工姓名</label>
			    <div class="col-sm-10">
			      <input type="text" class="form-control" name="empName" id="emp_namp_add_input" placeholder="员工姓名">
			       <span class="help-block"></span>
			    </div>
			    
			  </div>
			  <div class="form-group">
			    <label for="email_add_input" class="col-sm-2 control-label">邮箱</label>
			    <div class="col-sm-10">
			      <input type="text" class="form-control" name="email" id="email_add_input" placeholder="abc@163.com">
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <div class="form-group">
			    <label for="email_add_input" class="col-sm-2 control-label">性别</label>
			    <div class="col-sm-10">
					 <label class="radio-inline">
					  <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男
					</label>
					<label class="radio-inline">
					  <input type="radio" name="gender" id="gender2_add_input" value="F"> 女
					</label>
			    </div>
			  </div>
			  <div class="form-group">
			    <label for="emp_namp_add_input" class="col-sm-2 control-label" >部门</label>
			    <div class="col-sm-4">
			     <select class="form-control" name="dId" id="dept_add_input">
					  
				</select>
			    </div>
			  </div>
			  
			 
			</form>
          <!-- 员工添加表单结束 -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
      </div>
    </div>
  </div>
</div>
<!-- 员工添加模态框结束 -->

<!-- 员工修改模态框开始 -->
<div class="modal fade" id="empUpdateModa" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" ">编辑员工</h4>
      </div>
      <div class="modal-body">
        <!-- 员工修改表单开始 -->
		 <form class="form-horizontal" id="emp_Update_from">
			  <div class="form-group">
			    <label for="emp_namp_Update_input" class="col-sm-2 control-label" >员工姓名</label>
			    
			    <div class="col-sm-10">
			      
			      <p class="form-control-static" name="empName" id="emp_namp_Update_input"></p>
			       <span class="help-block"></span>
			    </div>
			    
			  </div>
			  <div class="form-group">
			    <label for="email_Update_input" class="col-sm-2 control-label">邮箱</label>
			    <div class="col-sm-10">
			      <input type="text" class="form-control" name="email" id="email_Update_input" >
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <div class="form-group">
			    <label for="email_Update_input" class="col-sm-2 control-label">性别</label>
			    <div class="col-sm-10">
					 <label class="radio-inline">
					  <input type="radio" name="gender" id="gender1_Update_input" value="M" checked="checked"> 男
					</label>
					<label class="radio-inline">
					  <input type="radio" name="gender" id="gender2_Update_input" value="F"> 女
					</label>
			    </div>
			  </div>
			  <div class="form-group">
			    <label for="emp_namp_Update_input" class="col-sm-2 control-label" >部门</label>
			    <div class="col-sm-4">
			     <select class="form-control" name="dId" id="dept_Update_input">
					  
				</select>
			    </div>
			  </div>
			  
			 
			</form>
          <!-- 员工修改表单结束 -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="emp_Update_btn">更新</button>
      </div>
    </div>
  </div>
</div>
<!-- 员工修改模态框结束 -->
	<div class="container">
		<!-- 第一行 -->
		<div class="row">
			<div class="col-md-12">
				<h1>SSM2</h1>
				
			</div>
		</div>
		<!-- 第er行 -->
		<div class="row">
			<div class="col-md-12 col-md-offset-8">
				<button class="btn btn-primary" id="emp_add_modl_btn">添加</button>
				<button class="btn btn-warning" id="emp_del_all_btn">删除</button>
			</div>
		</div>
		<!-- 第san行 -->

		<div class="row">
			<div class="col-md-12">
				<table class="table table-hover" id="emps_table">
				<thead>
					<tr>
					   <th>
					   <input type="checkbox" id="chenk_all" />
					   </th>
						<th>员工编号</th>
						<th>员工姓名</th>
						<th>性别</th>
						<th>邮箱</th>
						<th>所属部门</th>
						<th>操作</th>
					</tr>
					</thead>
<tbody>

</tbody>
				</table>

			</div>
		</div>
	<!-- 第si行 -->	
	
		<div class="row">
		<div class="col-md-6" id="page_info_area"></div>
		<div class="col-md-6" id="page_info_nav"></div>		
	</div>
	<script type="text/javascript">
	var currentPage;
	var totalpage;
$(function(){
	topage(1);
	
});
function topage(pn){
	$.ajax({
		url : "${path}/emps",
		data : "pn=" + pn,
		type : "GET",
		success : function(result) {
			build_emps_table(result);
			build_page_info(result);
			build_page_nav(result);
		}
	});
}
<!-- 表格内容区域 -start-->
	function build_emps_table(result){
		$("#emps_table tbody").empty();
		var emps=result.extend.pageinfo.list;
		$.each(emps,function(index,item){
		var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
		var empsId=$("<td></td>").append(item.empId);
		var empNameTd = $("<td></td>").append(item.empName);
		var genderTd = $("<td></td>").append(item.gender=='M'? "男":"女");
		var emailTd = $("<td></td>").append(item.email);
		var deptNameTd = $("<td></td>").append(item.department.deptName);	
		var editbtn = $("<button></button>").addClass("btn btn-primary btn-sm editbtn")
        .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
        .append("编辑").attr("editid",item.empId);	
		var delbtn = $("<button></button>").addClass("btn btn-danger btn-sm delbt")
        .append($("<span></span>").addClass("glyphicon glyphicon-trash"))
	     .append("删除").attr("delid",item.empId);
         var operate = $("<td></td>").append(editbtn)
		 .append(" ")
	     .append(delbtn);
         
         $("<tr></tr>").append(checkBoxTd).append(empsId).append(empNameTd).append(genderTd)
		  .append(emailTd)
         .append(deptNameTd).append(operate).appendTo($("#emps_table tbody"));
		});
		
		
		
	};
	
	<!-- 表格内容区域 -end-->	
	
	<!-- 分页信息区域 -start-->
	function build_page_info(result) {
		$("#page_info_area").empty();
		$("#page_info_area").append(
				"当前第" + result.extend.pageinfo.pageNum + "页，总"
						+ result.extend.pageinfo.pages + "页，总"
						+ result.extend.pageinfo.total + "条记录");
		lastPageNum = result.extend.pageinfo.pages;
		currentPageNum = result.extend.pageinfo.pageNum;
		totalpage=result.extend.pageinfo.total;
	};
	
	<!-- 分页信息区域 -end-->
	
	<!-- 分页条 -start-->
	function build_page_nav(result) {
		$("#page_info_nav").empty();

		var ul = $("<ul></ul>").addClass("pagination");

		var firstPage = $("<li></li>").append($("<a></a>").append("首页"));
		var prePage = $("<li></li>").append($("<a></a>").append("&laquo;"));
		if (result.extend.pageinfo.hasPreviousPage == false) {
			firstPage.addClass("disabled");
			prePage.addClass("disabled");
		} else {
			firstPage.click(function() {
				topage(1);
			});
			prePage.click(function() {
				topage(result.extend.pageinfo.pageNum - 1);
			});
		}

		var nextPage = $("<li></li>")
				.append($("<a></a>").append("&raquo;"));
		var lastPage = $("<li></li>").append($("<a></a>").append("末页"));
		if (result.extend.pageinfo.hasNextPage == false) {
			lastPage.addClass("disabled");
			nextPage.addClass("disabled");
		} else {
			lastPage.click(function() {
				topage(result.extend.pageinfo.pages);
			});
			nextPage.click(function() {
				topage(result.extend.pageinfo.pageNum + 1);
			});
		}

		ul.append(firstPage).append(prePage);
		var nums = result.extend.pageinfo.navigatepageNums;
		$.each(nums, function(index, item) {
			var num = $("<li></li>").append($("<a></a>").append(item));
			if (result.extend.pageinfo.pageNum == item)
				num.addClass("active");
			num.click(function() {
				topage(item);
			});
			ul.append(num);
		});
		ul.append(nextPage).append(lastPage);
		$("<nav></nav>").append(ul).appendTo("#page_info_nav");
	}
		<!-- 分页条 -end-->
		
		$("#emp_add_modl_btn").click(function(){
			getDepts("#dept_add_input");
			/* claeraddemp("#emp_namp_add_input");
			claeraddemp("#email_add_input"); */
			$('#empAddModa form')[0].reset();
			$('#empAddModa').modal({
				backdrop : "static"
			});
			
		});
		
	function claeraddemp(els){
			$(els).val("");
			$(els).next("span").text("")
			$(els).parent().removeClass("has-error has-success")
		}
	function getDepts(els){
		
		$(els).empty();
		$.ajax({
			url : "${path}/depts",
			type : "GET",
			success : function(result){
				console.log(result);
								
				$.each(result.extend.dept,function(){
					var ptionEle=$("<option></option>").append(this.deptName).attr("value",this.deptId);
					ptionEle.appendTo(els);
					
				});
			}
		});
	}
	
	$("#emp_namp_add_input").change(function(){
		var empnume=$("#emp_namp_add_input").val();
		$.ajax({
			url : "${path}/chenkUser",
			data :"empNume=" +empnume,
			type : "POST",
			success : function(result){
				if(result.code==100){
					showValidateMsg("#emp_namp_add_input", "success", "用户可用")
				}else{
					showValidateMsg("#emp_namp_add_input", "error", result.extend.vs_msg)
				}
			}
		});	 
		
	})
	
	$("#emp_save_btn").click(function(){
		
		if(!empaddchenck()){
			return false
		};
	     
		 $.ajax({
			url : "${path}/emps",
			data :$("#emp_add_from").serialize(),
			type : "POST",
			success : function(result){
				$('#empAddModa').modal('hide');
				topage(totalpage);
			}
		});	 
		
	});
	function empaddchenck(){
		flag = true;
		var empname2=$("#emp_namp_add_input").val();
		var regname=/^[a-zA-Z0-9_-]{6,16}$|(^[\u2E80-\u9FFF]{2,5}$)/;
		if(!regname.test(empname2)){
			showValidateMsg("#emp_namp_add_input", "error", "用户名格式不正确");
			flag = false;
		}else{
			showValidateMsg("#emp_namp_add_input", "success", "用户名格式正确");
		}
			
		var email=$("#email_add_input").val();
		var regemail=/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
		if(!regemail.test(email)){
			showValidateMsg("#email_add_input", "error", "邮箱格式不正确");
			flag = false;
		}else{
			showValidateMsg("#empName_input", "success", "邮箱格式正确")
		}
		return flag;
	}
	function showValidateMsg(ele, status, msg){
		$(ele).parent().removeClass("has-error has-success");
		$(ele).next("span").text("");
		if(status=="error"){
			$(ele).parent().addClass("has-error");
			$(ele).next("span").text(msg);
		}else{
			$(ele).parent().addClass("has-success has-feedback");
			$(ele).next("span").text(msg);
		}
	}
	$(document).on("click",".editbtn",function(){
		getEmp($(this).attr("editid"));
		getDepts("#dept_Update_input");
		$('#emp_Update_btn').attr("edit-id",$(this).attr("editid"));
		
		$('#empUpdateModa').modal({
			backdrop : "static"
		});
		
	});
	function getEmp(id){
		
		$.ajax({
			url : "${path}/emp/"+id,
			type : "GET",
			success : function(result){
				
				var  empU=result.extend.emp;
				$('#emp_namp_Update_input').text(empU.empName);
				$('#email_Update_input').val(empU.email);
				$("#empUpdateModa input[name=gender]").val([empU.gender]);
				$("#empUpdateModa select").val([empU.dId]);
				
			}
		});	 
		
	}
	
	$('#emp_Update_btn').click(function(){
			$.ajax({
			url : "${path}/update/"+$('#emp_Update_btn').attr("edit-id"),
			type : "PUT",
			data : $('#emp_Update_from').serialize(),
			success : function(result){
				$('#empUpdateModa').modal('hide');
				topage(currentPageNum);
			}
		});
		
	})
	
	$(document).on("click",".delbt",function(){
		var dempName=$(this).parents("tr").find("td:eq(2)").text();
		
		if(confirm("确认删除【"+dempName+"】吗？")){
		
			$.ajax({
				url : "${path}/del/"+$(this).attr("delid"),
				type : "DELETE",
				success : function(result){
					alert(result.msg);
					topage(currentPageNum);
				}
			});
			
		}
		
	});
$("#chenk_all").click(function(){
	$(this).prop("checked")
	$(".check_item").prop("checked",$(this).prop("checked"));
	
});
$(document).on("click",".check_item",function(){
	var flag=$(".check_item:checked").length==$(".check_item").length;
	$("#chenk_all").prop("checked",flag);
});

$("#emp_del_all_btn").click(function(){
	var delaln="";
	var delid="";
	$.each($(".check_item:checked"),function(){
	
	 delaln+=$(this).parents("tr").find("td:eq(2)").text()+",";
	 delid+=$(this).parents("tr").find("td:eq(1)").text()+"-"
	});
	delaln=delaln.substring(0,delaln.length-1);
	delid=delid.substring(0,delid.length-1);
	alert(delid);
	if(confirm("确认删除【"+delaln+"】吗？")){
		$.ajax({
			url : "${path}/del/"+delid,
			type : "DELETE",
			success : function(result){
				alert(result.msg);
				topage(currentPageNum);
			}
		});
	}
});


	</script>
</body>
</html>